<template>
    <view class="body">
		<view class="top">
				<view class="left_arrow_l"  @click="leftbtn()"><image class="left_arrow"src="../../static/left.png"></image></view>
				<view class="right_arrow_r" @click="rightbtn()"><image class="right_arrow" src="../../static/right.png"></image></view>	
			<view class="bg">
				<view>
					<image class="curve_share" src="../../static/curve_share.png"/>
					<button class="curve_share_btn" open-type="share">分享</button>
					<image class="rotate_hv" @click="rotate()"  src="../../static/rotate_hv.png"></image>
				</view>
				<view class="box">
					<uni-segmented-control  :current="current" :values="items" @clickItem="getServerData" style-type="button" active-color="#FFFFFF"></uni-segmented-control>
			    </view>
			</view>
			<view class="content">
				<view v-show="current === 0">
					<view class="qiun-columns">
						 <view class="qiun-charts" v-bind:style="{height:screenHeight-screenHeight*0.21+'px'}">
							<!--#ifndef MP-ALIPAY -->
							<canvas canvas-id="canvasLineB" id="canvasLineB" class="charts-rotate" v-bind:style="{height:screenHeight-screenHeight*0.21+'px'}" @touchstart="touchLineB" @touchmove="moveLineB" @touchend="touchEndLineB"></canvas>
							<!--#endif-->
						 </view>
					</view>
				</view>
            <view v-show="current === 1">
                <view class="qiun-columns">
                	 <view class="qiun-charts" v-bind:style="{height:screenHeight-screenHeight*0.21+'px'}">
                		<!--#ifndef MP-ALIPAY -->
                		<canvas canvas-id="canvasLineC" id="canvasLineC" class="charts-rotate" v-bind:style="{height:screenHeight-screenHeight*0.21+'px'}"  @touchstart="touchLineB" @touchmove="moveLineB" @touchend="touchEndLineB"></canvas>
                		<!--#endif-->
                	 </view>
                </view>
            </view>
            <view v-show="current === 2">
                <view class="qiun-columns">
                	 <view class="qiun-charts" v-bind:style="{height:screenHeight-screenHeight*0.21+'px'}">
                		<!--#ifndef MP-ALIPAY -->
                		<canvas canvas-id="canvasLineD" id="canvasLineD" class="charts-rotate" v-bind:style="{height:screenHeight-screenHeight*0.21+'px'}"  @touchstart="touchLineB" @touchmove="moveLineB" @touchend="touchEndLineB"></canvas>
                		<!--#endif-->
                	 </view>
                </view>
            </view>
        </view>
		</view>
    </view>
</template>

<script>
	import store from 'store';
	//分段器
	import uniSegmentedControl from "@/components/uni-segmented-control/uni-segmented.vue"
	//曲线图
	import uCharts from '@/components/u-charts/u-charts.js';
	import  { isJSON } from '@/common/checker.js';
	var _self;
	var canvaLineB=null;
	export default {
	    components: {uniSegmentedControl},
		onShareAppMessage(res) {//分享
		   if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		   }
		   return {
		      title: '减肥日记',
			  content:'减肥路上,一直陪伴在你身边的小工具',
		      path: '/pages/curve/horizontal',
		   }
	    },
		data() {
			return {
	            items:['周','月','年'],
				current:0,
				cWidth2:'',//横屏图表
				cHeight2:'',//横屏图表
				pixelRatio:1,
				textarea:'',
				target_weight:'',
				maxa:'',
				minn:'',
				line_one:'', 
				line_two:'',
				screenHeight:0,//获取手机的屏幕高度
				weeki:0
			}
		},
		onLoad() {
			_self = this;
			//#ifdef MP-ALIPAY
			uni.getSystemInfo({
				success: function (res) {
					if(res.pixelRatio>1){
						//正常这里给2就行，如果pixelRatio=3性能会降低一点
						//_self.pixelRatio =res.pixelRatio;
						_self.pixelRatio =2;
					}
				}
			});
			//#endif
			this.getServerData();
			_self.cWidth2=uni.upx2px(500);//宽
			uni.getSystemInfo({
				success(res) {
				console.log(res.screenHeight,'手机的屏幕');	
				_self.screenHeight = res.screenHeight;
				//_self.cHeight2=_self.screenHeight-150;//横屏高
				_self.cHeight2=_self.screenHeight-_self.screenHeight*0.20;//横屏高
				console.log(_self.cHeight2,'----90');
				}
			})
			
		},
		onShow:function() {
			var token = uni.getStorageSync('token');
			var date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();
			var choose_date = year+'-'+month+'-'+day;
			uni.request({
				url:store.state.URL+"rwd/select_weight/day_select",
				data:{
					token,
					choose_date,
				},
				success:(res)=>{
					console.log(res,'res');
					console.log(res.data.target_weight,'曲线目标体重');//查出来赋值
					this.target_weight = res.data.target_weight;//赋值
					this.maxa=res.data.max;
					this.minn=res.data.min;
					this.line_one=res.data.line_one;
					this.line_two=res.data.line_two;
				},
				fail: () => {
					console.log("网络错误，小程序端请检查合法域名");
				},
			});
	   },
		methods: {
			rotate:function(){
				uni.switchTab({
				  url:'../curve/curve'
			    })
			},
			leftbtn:function(){
				console.log('向左加载!');
				this.weeki++;
				console.log(this.weeki,'this.weeki');
				this.getServerData(this.current);//this.current
			},
			rightbtn:function(){
				console.log('向右加载');
				if(this.weeki > 0)this.weeki--;
				console.log(this.weeki,'this.weeki');
				this.getServerData(this.current);
			},
			getServerData(index){
				var token = uni.getStorageSync('token');
				var weeki = this.weeki;
				if (this.current !== index) {
				    this.current = index;
				 }
				 if(this.current == undefined) this.current = 0;
				 if(this.current == 0){
					uni.setStorageSync('x_num',7);
					uni.request({
						url: store.state.URL+"rwd/select_weight/histogram",//周
						data:{
							token:token,
						},
						success: function(ress) {
							var weekdate = '';
							let weekarr = ress.data.histogram.chartData.categories;
							let wd_k = 0;
							wd_k = (weekarr.length-1) - weeki * 7;
							var d = new Date();
							var d_y = d.getFullYear();
							var weekarr_m = "";
							var weekarr_d = "";
							if(weekarr[wd_k] != '今天'){
								weekarr_m = weekarr[wd_k].substr(0,2);
								weekarr_d = weekarr[wd_k].substr(3,2);
							}else{
								weekarr_m = d.getMonth()+1;
								weekarr_d = d.getDate();
							}
							weekdate = d_y+'-'+ weekarr_m + '-' + weekarr_d;
							console.log(weekdate,'weekdate');
							//weekdate = '拼接好的字符串';
							uni.request({
								url: store.state.URL+"rwd/select_weight/histogram_two",//周一
								data:{
									token:token,
									num:weekdate,
								},
								success: function(res) {
									//console.log(res,'res2 fan2 ');
									let arr = res.data.histogram.chartData.series[0]['data'];
									for (let k in arr) {
										if(arr[k] == 0){
											arr[k] = null;
										}
									}
									let LineB={categories:[],series:[]};
									//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
									LineB.categories=res.data.histogram.chartData.categories;
									LineB.series=res.data.histogram.chartData.series;
									_self.textarea = JSON.stringify(res.data.histogram.LineB);
									_self.showLineB("canvasLineB",LineB);
								},
								fail: () => {
									_self.tips="网络错误，小程序端请检查合法域名";
								},
							});
						},
						fail: () => {
							_self.tips="网络错误，小程序端请检查合法域名";
						},
					});
				 }else if(this.current == 1){
					uni.setStorageSync('x_num',7);
					uni.request({
						url: store.state.URL+"rwd/select_weight/diagram_m",//月
						data:{
							token,
						},
						success: function(ress) {//第一次请求
							var weekdate = '';
							let weekarr = ress.data.diagram.chartData.categories;
							let wd_k = 0;
							wd_k = (weekarr.length-1) - weeki * 7;
							var d = new Date();
							var d_y = d.getFullYear();
							var weekarr_m = weekarr[wd_k].substr(0,2);
							var weekarr_d = weekarr[wd_k].substr(3,2);
							weekdate = d_y+'-'+ weekarr_m + '-' + weekarr_d;
							console.log(weekdate,'weekdate');
							uni.request({
								url: store.state.URL+"rwd/select_weight/diagram_m_t",//月一
								data:{
									token:token,
									date_m:weekdate,
								},
								success: function(res) {
									console.log(res,'diagram_m_t');
									let LineB={categories:[],series:[]};
									//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
									LineB.categories=res.data.diagram.chartData.categories;
									LineB.series=res.data.diagram.chartData.series;
									_self.textarea = JSON.stringify(res.data.diagram.LineB);
									_self.showLineB("canvasLineC",LineB);
								},
								fail: () => {
									_self.tips="网络错误，小程序端请检查合法域名";
								},
							});
						},
						fail: () => {
							_self.tips="网络错误，小程序端请检查合法域名";
						},
					}); 
				 }else{
					 uni.setStorageSync('x_num',7);
					 uni.request({
					 	url: store.state.URL+"rwd/select_weight/diagram_y",//年
					 	data:{
					 		token,
					 	},
					 	success: function(ress) {
							var weekdate = '';
							let weekarr = ress.data.diagram.chartData.categories;
							let wd_k = 0;
							wd_k = (weekarr.length-1) - weeki * 7;
							var weekarr_y = parseInt(weekarr[wd_k]);
							console.log(weekarr_y,'weekarr_y')
							if(weekarr_y>=10){
								weekarr_y
							}else{
								weekarr_y='0'+weekarr_y;
							}
							console.log(weekarr_y,'weekarr_y');
							uni.request({
								url:store.state.URL+"rwd/select_weight/diagram_y_t",//年2
								data:{
									token:token,
									date_y:weekarr_y
								},
								success:function(res){
								  console.log(res.data.diagram);
								  let LineB={categories:[],series:[]};
								  LineB.categories=res.data.diagram.chartData.categories;
								  LineB.series=res.data.diagram.chartData.series;
								  _self.textarea = JSON.stringify(res.data.diagram.LineB);
								  _self.showLineB("canvasLineD",LineB);	
								},
								fail:function(){
									
								}
							});
					 	},
					 	fail: () => {
					 		_self.tips="网络错误，小程序端请检查合法域名";
					 	},
					 }); 
				 }
			},
			showLineB(canvasId,chartData){
				var t_w=this.target_weight;
				console.log( this.target_weight,'this.target_weight9999');
				var max=this.maxa;
				var min=this.minn;
				var line_one=this.line_one;
				var line_two=this.line_two;
				let bh = Math.ceil(1/28*(max - min));
				console.log(bh,'aghulflf');
				var is_one = true;
				var is_two = true;
				if(line_one < t_w && t_w < (line_one+bh) || (line_one-bh) < t_w && t_w < line_one){
					is_one = false;
				}else if(line_two < t_w && t_w < (line_two+bh) || (line_two-bh) < t_w && t_w < line_two){
					is_two = false;
				}
				
				const x_num = uni.getStorageSync('x_num');
			    console.log(x_num,'x_num');
				canvaLineB=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'line',
					fontSize:11,
					legend:{show:false},
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					rotate:true,//开启图表横屏
					// #ifdef MP-ALIPAY || MP-BAIDU
					rotateLock:true,//百度及支付宝需要锁定旋转
					// #endif
					categories: chartData.categories,
					enableScroll: true,//开启图表拖拽功能
					animation: false,
					series: chartData.series,
					xAxis: {
						disableGrid:false,
						type:'grid',
						gridType:'dash',
						itemCount:x_num,//可不填写，配合enableScroll图表拖拽功能使用，x轴单屏显示数据的数量，默认为5个
						scrollShow:false,//新增是否显示滚动条，默认false
						scrollAlign:'right',
						axisLine:false,
						gridColor:'#FFFFFF',
					},
					yAxis: {
						gridType:'dash',
						gridColor:'#CCCCCC',
						splitNumber:1,
						data:[{	
							position:'right',
							axisLine:false,
							min:min,
							max:max,
							format:(val)=>{return val.toFixed(1)+'斤'}//如不写此方法，Y轴刻度默认保留两位小数
						  }],
						},
					width: _self.cWidth2*_self.pixelRatio,
					height: _self.cHeight2*_self.pixelRatio,
					dataLabel: false,
					dataPointShape: true,
					extra: {
						line:{
							type: 'curve'
						},
						toolTip:{
							xAxisLabel:true,
							labelFontColor:'#000000',
							labelBgColor:'#FFFFFF',
						},
						markLine:{
							type:'dash',
							dashLength:2,
							data:[
							{
							    value:line_one?line_one:'',//line_one;
							    lineColor: '#CCCCCC',
							    showLabel:is_one,
							    labelBgColor:'#FFFFFF',	
							},
							{
							    value:line_two ?line_two:'',//line_two;
							    lineColor: '#CCCCCC',
							    showLabel:is_two,
							    labelBgColor:'#FFFFFF',	
							},{
								value:t_w ? t_w:'',//目标体重线
								lineColor: '#F47C7B',
								showLabel:true,
								labelBgColor:'#FFFFFF',
								labelFontColor:'#F47C7B',
								labelBgOpacity:0,
							}]
						}
					},
				});
			},
			touchLineB(e){
				canvaLineB.scrollStart(e);
			},
			moveLineB(e) {
				canvaLineB.scroll(e);
			},
			touchEndLineB(e) {
				canvaLineB.scrollEnd(e);
				//下面是toolTip事件，如果滚动后不需要显示，可不填写
				canvaLineB.showToolTip(e, {
					format: function (item, category) {
						return category + ' ' + ':' + item.data
					}
				});
			},
		}
	}
</script>

<style>
	body{
		height: 100%;
		background-color: #FFFFFF;
	}
	.bg{
	 	position: absolute;
	 	background-color: #F47C78;
	 	height:100%;
	 	width: 120upx;
	 	right:0%;
	 }
	 .box{
	 	/* diasp-top: 32upx; */
	 	position: absolute;
	 	top: 22%;
	 	right: 12%;
	 	height: 100upx;
	 	width: 100%;
	 	transform:rotate(90deg);
	 	-ms-transform:rotate(90deg);
	 	-webkit-transform:rotate(90deg);
	 }
	 .curve_share{
	 	position: absolute;
	 	top: 6%;
	 	left: 35%;
	 	height: 36upx;
	 	width: 36upx;
	 	transform:rotate(90deg);
	 	-ms-transform:rotate(90deg);
	 	-webkit-transform:rotate(90deg);
	 }
	 .curve_share_btn{
	 	position: absolute;
	 	top: 13%;
	 	left: 10%;
	 	height:46upx;
	 	width: 110upx;
	 	font-size: 22upx;
	 	font-family: PingFangSC-Regular;
	 	background-color:transparent;
	 	color: #FFFFFF;
	 	transform:rotate(90deg);
	 	-ms-transform:rotate(90deg);
	 	-webkit-transform:rotate(90deg);
	 }
	 .curve_share_btn:after{
	 	 border: none;
	  }
	  .rotate_hv{
	 	 position: absolute;
	 	 width: 44upx;
	 	 height: 44upx;
	 	 bottom: 6%;
	 	 right: 30%;
	 	 transform:rotate(90deg);
	 	 -ms-transform:rotate(90deg);
	 	 -webkit-transform:rotate(90deg);
	  }
	 .content{
	 	background-color: #FFFFFF;
	 }
	 .left_arrow_l{
		 position: absolute;
		 left: 0%;
		 top: 0%;
		 height:60upx;
		 width: 600upx;
	 }
	 .right_arrow_r{
		 position: absolute;
		 left: 0%;
		 bottom: 0%;
		 height:60upx;
		 width: 600upx;
	 }
	 .left_arrow{
		 position: absolute;
		 height: 60upx;
		 width: 60upx;
		 top: 0.5%;
		 right:40%;
	 }
	 .right_arrow{
		 position: absolute;
		 height: 60upx;
		 width: 60upx;
		 bottom:1%;
		 right: 40%;
	 }
	/*样式的width和height一定要与定义的cWidth和cHeight相对应*/
	.qiun-charts{
		width: 500upx;
		/* height: 1100upx; */
		background-color: #FFFFFF;
		/* padding: 25upx; */
	}
	
	.charts-rotate {
		width: 500upx;
		/* height: 1100upx; */
		background-color: #FFFFFF;
		top: 6.5%;
	}
</style>